<template>
  <div class="locationPanelWrap">
    <div class="loaction">
      <div class="loaction-search clearfix">
        <div class="loaction-search-left">
          <el-form label-position="top">
            <el-form-item label="关键字定位地图中心点：">
              <el-input v-show="mapType === '2d'" size="small" placeholder="输入地址" id="pickerInput" v-model="searchVal2D"
                        :clearable="true"></el-input>
              <el-input v-show="mapType === '3d'" size="small" placeholder="输入地址" id="pickerInput3D"
                        v-model="searchVal3D"
                        :clearable="true"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="loaction-search-right">
          <el-form label-position="top">
            <el-form-item label="坐标定位地图中心：" style="text-align: left;">
              <el-col class="line" :span="2" style="text-align: left">X:</el-col>
              <el-col :span="7">
                <el-form-item>
                  <el-input size="small" placeholder="X:" v-model="lnglat[0]"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2" style="text-align: center">Y:</el-col>
              <el-col :span="7">
                <el-form-item>
                  <el-input size="small" placeholder="Y:" v-model="lnglat[1]"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="text-align: right">
                <el-button class="pos-btn" type="primary" round size="small" @click="setZoomCenter(12, lnglat)">
                  定位


                </el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        searchVal2D: '',
        searchVal3D: ''
      }
    },
    props: {
      lnglat: {
        type: Array,
        default () {
          return []
        }
      },
      searchValue: {
        type: String
      },
      mapType: {
        type: String
      }
    },
    model: {
      prop: 'searchValue',
      event: 'searchVal'
    },
    watch: {
      searchValue (cur) {
        if (this.mapType === '2d') {
          this.searchVal2D = cur
        } else {
          this.searchVal3D = cur
        }
      }
    },
    methods: {
      setZoomCenter (zoom, center) {
        this.$emit('zoomAndCenter', {
          zoom,
          center
        })
      }
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  /*搜索定位*/
  .loaction {
    width: 745px;
    position: fixed;
    top: 120px;
    left: 240px;
    z-index: 999;
    color: #fff;
    text-align: left;
    height: 85px;
    &-search {
      /*width: 100%;*/
      background-color: #3f4249;
      padding: 5px 25px;
      border: 2px solid;
      border-image: -webkit-linear-gradient(#3f4249, #00ffff, #3f4249) 30 30;
      border-image: -moz-linear-gradient(#3f4249, #00ffff, #3f4249) 30 30;
      border-image: linear-gradient(#3f4249, #00ffff, #3f4249) 30 30;
      height: 100%;
      .el-form-item__label {
        color: #fff;
      }
      .el-form-item {
        margin-bottom: 5px !important;
      }
      .el-form--label-top .el-form-item__label {
        padding: 0 !important;
        line-height: 35px !important;
      }
      &-left {
        float: left;
        width: 30%;
      }
      &-right {
        float: right;
        width: 60%;
        text-align: right;
        .pos-btn {
          padding: 10px 30px;
          background: -webkit-linear-gradient(left, #088eec, #17b3e7) !important;
          /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(right, #088eec, #17b3e7) !important;
          /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(right, #088eec, #17b3e7) !important;
          /* Firefox 3.6 - 15 */
          background: linear-gradient(to right, #088eec, #17b3e7) !important;
          /* 标准的语法（必须放在最后） */
        }
      }
    }
    .amap-ui-poi-picker-sugg-list {
      color: #999 !important;
      min-width: 300px !important;
    }
    .amap-ui-poi-picker-search-results-container,
    .amap-ui-poi-picker-sugg-container {
      min-width: 300px !important;
    }
  }
</style>
